<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加子部门</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css"  media="all">
</head>
<body>

<style>
#deptName:hover{
	cursor:pointer;
	background:#E5E5E5;
}
ul.tree{
	list-style:none;
	margin:0px;
	padding:0px 30px;
}
ul.tree li{
	margin:0px;
	cursor:pointer;
	font-size:16px;
}
ul.tree span:hover{
	background:#E5E5E5;
}
.symbol{
	margin-right:5px;

}
#topUL{
	font-size:17px;
	margin:15px 15px;
	cursor:pointer;
}
</style>
   
<fieldset class="layui-elem-field layui-field-title" 
	style="margin-top: 20px;">
  <legend>添加子部门</legend>
</fieldset>

<script src="${ctxPath}/static/js/jquery-3.6.1.min.js"></script>

<form id="userForm" class="layui-form" 
	action="" 
	method="post">
	
	<div class="layui-form-item">
    	<label class="layui-form-label">部门名称</label>
		<div class="layui-input-block" style="width:450px;">
			<input type="text" id="deptName" 
				 name="deptName" autocomplete="off" 
				 placeholder="请输入部门名称" 
			class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
    	<label class="layui-form-label">部门描述</label>
		<div class="layui-input-block" style="width:450px;">
			<input type="text" id="deptDesc" 
				 name="deptDesc" autocomplete="off" 
				 placeholder="请输入部门描述" 
			class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
    	<label class="layui-form-label">父级部门</label>
		<div class="layui-input-block" style="width:450px;">
			<input type="text" 
				 autocomplete="off" readonly
				 class="layui-input" value="${pDept.deptName}">
			<input type="hidden" id="parentId" 
			     name="parentId" value="${pDept.id}"
				 autocomplete="off"> 
			<input type="hidden" id="pids"
			     name="pids" value="${pDept.pids}"
				 autocomplete="off">
		</div>
	</div>

	<div class="layui-form-item">
    	<div class="layui-input-block">
      		<button class="layui-btn" type="button" 
      			onclick="goSubmit();" >
      			创建子部门
      		</button>
			<button type="reset" class="layui-btn layui-btn-primary"
			onclick="reloadPage1()">
				重置表单
			</button>
		</div>
	</div>

</form>
<script>
//{ps}设置我要抓取的表单数据。
var items = [
   	"deptName", "deptDesc",
   	"parentId", "pids"
];

//{ps} 抓取表单数据
function pickData(){
	//定义一个对象, 存放所有数据。
	var obj = {};
	for( var i=0; i<items.length; i++ ){
		var id = items[i];  //获取表单项 id
		var val = $("#"+id).val();
		//{3}填入 obj 对象
		obj[ id ] = val;		
	}
	return obj;
}

//{ps}这是提交函数
function goSubmit(){
	var obj = pickData();
	console.log( obj );
	$.ajax({
		url:'${ctxPath}/Dept/saveDept',
		type:'post',
		data:obj,
		dataType:'json',
		success:function(resp){
			var ret = resp['result'];
			console.log(ret)
			if(ret==='success'){
				layer.msg('保存部门成功');
				setTimeout(reloadPage,1500)
			}else{
				layer.msg('保存部门失败, 原因：' +  resp.cause);
			}
		}
	});
}

function reloadPage(){
	window.location = "${ctxPath}/Dept/viewList";
}
function reloadPage1(){
	window.location = "${ctxPath}/Dept/viewAdd";
}
</script>

<div id="box" style="display:none;"></div>

<script src="${ctxPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
layui.use([ 'form' ], function(){
  var form = layui.form
  ,layer = layui.layer;
});
</script>
